<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*   #ffc200 */
        ul{
            list-style: none;
        }
        a {
            text-decoration: none; /* 去掉下划线 */
            color: inherit; /* 继承父元素颜色，状态不变 */
        }
        .app{
          width: 100%;
          height: 1200px;
        }
        .nav{
            width: 270px;
            height: 730px;
            background-color: #353744;
            color: aliceblue;
            padding-top: 100px;
            padding-left: 20px;
            display: inline-block;
        }

        .nav ul li{
           width: 120px;
            height: 50px;
            margin-top: 10px;
            font-size: 22px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #ffc200;
            border-radius: 40px;
            background-color: #ffc200;
        }

        .content{
          height: 730px;
          width: 1200px;
          background-color: aliceblue;
          display: inline-block;
        }
        .content-mian{
          font-size: 25px;
        }
        .btn-add{
          margin-left: 0px;
        }
        .btn-add button{
          border: 1px solid #353744;
          width: 80px;
          height: 30px;
          background-color: green;
          border-radius: 30px;
          color: aliceblue;
        }
        .btn-delete button{
          border: 1px solid #353744;
          width: 80px;
          height: 30px;
          background-color: green;
          border-radius: 30px;
          color: aliceblue;
        }

    </style>
</head>
<body>
<div class="app">
   <div class="nav">
       <ul>
            <li><a href="index.html">员工管理</a></li>
            <li><a href="fenlei.html">分类管理</a></li>
        </ul>
    </div>

    <div class="content">
        <div class="content-nav">
            <h1>员工管理</h1>
            <h3>员工信息</h3>
            <div class="btn-add">

              <span>用户名:</span><input id="yhm" type="text">
              <span>密  码:</span><input id="mm" type="text">
              <span>名  字:</span><input id="mz" type="text">
              <span>手机号:</span><input id="sjh" type="text">
              <button onclick="add()">添加员工</button>
            </div>
            <hr>
            <div class="btn-delete">
              <span>ID:</span><input id="ID" type="text">
              <button onclick="delete_e()">删除员工</button>
            </div>

        </div>

        <div class="content-mian" id="content">

        </div>
    </div>
</div>
</body>

<script src="axios.min.js"></script>
<script>
    window.onload=function(){
      employeeInfo();
    }

    function employeeInfo(){
      var contentId =  document.getElementById("content");

      axios({
        url: "http://localhost:8080/employee/page",
        method: 'get'
      }).then(response => {
        var arrayRes = [];
        arrayRes = response.data.data;
        var s = "";
        for (var i = 0; i < arrayRes.length; i++) {
          s += "ID:"+arrayRes[i].id+",用户名:"+arrayRes[i].username +",名字:"+ arrayRes[i].name +",电话:"+arrayRes[i].phone+"<br/>";
        }
        contentId.innerHTML = s;
      })
    }

    function add(){
      var yhm = document.getElementById("yhm");
      var mm = document.getElementById("mm");
      var mz = document.getElementById("mz");
      var sjh = document.getElementById("sjh");
      var myUrl = "http://localhost:8080/employee/add?username="+yhm.value+"&password="+mm.value+"&name="+mz.value+"&phone="+sjh.value;
      axios({
        url: myUrl,
        method: 'post'
      }).then(response => {
        employeeInfo();
      });

    }
    function delete_e(){
        var ID = document.getElementById("ID");
          var myUrl = "http://localhost:8080/employee/delete?id="+ID.value;
          axios({
            url: myUrl,
            method: 'post'
          }).then(response => {
            employeeInfo();
          });

    }
    // function delete(){
    //   // var ID = document.getElementById("ID");
    //   // var myUrl = "http://localhost:8080/employee/delete?id=ID;
    //   // axios({
    //   //   url: myUrl,
    //   //   method: 'post'
    //   // }).then(response => {
    //   //   employeeInfo();
    //   // });
    //
    // }
</script>
</html>